<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="tab">
            文本
            <div>姓名<input type="text" v-model="uname"><br></div>
            单选
            <div>性别
                <input type="radio" v-model="gender" value="boy">男
                <input type="radio" v-model="gender" value="girl">女
            </div>
           复选
            <div>
                爱好
                唱<input type="checkbox" name="" v-model="hobby" value="唱">
                跳<input type="checkbox" name="" v-model="hobby" value="跳">
                rapper<input type="checkbox" name="" v-model="hobby" value="rapper">
            </div>
            文本域
            <div>
                <select name="" v-model="jop" id="">
                    <option value="0">架构师</option>
                    <option value="1">会计</option>
                    <option value="2">防护五元</option>
                    <option value="3">工人</option>
               </select>
           </div>

           <div>
                <textarea name="" v-model="info" id="" cols="30" rows="10"></textarea>
           </div>

           <div>
                <input type="submit" @click="reg()" value="提交">
           </div>
        </div>
    </div>
    <script src="/js/js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            
            data: {
                uname: 'temp',
                gender: 'girl',
                hobby: ['唱', 'rapper'],
                jop: '2',
                info: '你好'
            },
            methods: {
                reg() {
                    console.log(this.uname);
                    console.log(this.gender);
                    console.log(this.hobby);
                    console.log(this.jop);
                    console.log(this.info);
                }
            }
        })
    </script>
</body>
</html>
